<!DOCTYPE html>
<html lang="en">
<head>
    <title>主播计划</title>
    <meta name="description" content="overview &amp; stats"/>
    #parse("include/head.html")
    <link rel="stylesheet" type="text/css"
          href="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="personal-right">
            <div class="title">
                编辑资料
                <a id="logoutBtn" href="$request.contextPath/logout">
                    <i class="ace-icon fa fa-power-off"></i> 退出登录</a>
            </div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="personal-info-edit">
                <tr>
                    <td width="60" align="right">头　像：</td>
                    <td><img id="headEdit" onclick="uploadHead()" src="
                #if ($profile.avatar) $profile.avatar
                #else $request.contextPath/res/images/head.jpg
                #end"
                             class="head"></td>
                </tr>
                <tr>
                    <td align="right">昵　称：</td>
                    <td><input name="nickname" value="$profile.nickname" placeholder="昵称" type="text" style="width:200px"></td>
                </tr>
                <tr class="boboer">
                    <td align="right">性　别：</td>
                    <td>
                        <select name="gender" id="gender" class="select-t">
                            <option #if($profile.gender == 1) selected #end value="1">男</option>
                            <option #if($profile.gender == 2) selected #end value="2">女</option>
                        </select>
                    </td>
                </tr>
                <tr class="boboer">
                    <td align="right">所在地：</td>
                    <td>
                        <select id="provinceList" class="select-t">
                        </select>

                        <select id="cityList" class="select-t">
                        </select>

                        <select id="regionList" class="select-t">
                        </select>
                    </td>
                </tr>
                <tr class="boboer">
                    <td align="right">身　高：</td>
                    <td><input name="height" id="height" value="$profile.height" type="text" placeholder="身高"></td>
                </tr>
                <tr class="boboer">
                    <td align="right">体　重：</td>
                    <td><input name="height" id="weight" value="$profile.weight" type="text" placeholder="体重"></td>
                </tr>
                <tr class="boboer">
                    <td align="right">三　围：</td>
                    <td><input name="bwn" id="bwn" type="text" value="$profile.bwn" placeholder="三围"></td>
                </tr>
            </table>
        </div>

        <div class="space-4"></div>
        <div class="col-xs-12 title">
            直播计划
            <a id="addPlanBtn" href="javascript:void(0)">
                <i class="ace-icon gl glyphicon-plus"></i> 添加计划</a>
        </div>

        <div class="space-4"></div>
        <div class="space-4 col-xs-12"></div>
        <div class="col-xs-12">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>直播平台</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                #foreach ($item in ${boplans})
                <tr>
                    <td> $item.platformName</td>
                    <td> $date.format('MM-dd HH:mm', $item.beginTime)</td>
                    <td> $date.format('MM-dd HH:mm', $item.endTime)</td>
                    <td>
                        <div class="action-buttons">
                            <a class="red" href="javascrip:void(0)" onclick= "deletePlan(${item.planId})" title="移除">
                                <i class="ace-icon fa fa-trash-o bigger-130"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                #end
                </tbody>
            </table>
        </div>

        <div class="space-4"></div>
        <div class="col-xs-12 title">
            相册
            <a id="uploadBtn" href="javascript:void(0)">
                <i class="ace-icon gl glyphicon-plus"> </i> 上传照片</a>
        </div>
        <ul id="user_album" class="col-xs-12 personal-photo">
        </ul>
        <div id="album_pager" style="margin: 5px;text-align: right"></div>

        <!-- /.span -->
    </div>
</div>
<div id="modal-category" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">×</span>
                    </button>
                    新增直播计划
                </div>
            </div>
            <form class="form-horizontal" style="padding:10px" method="post" role="form" id="submitForm" action="$request.contextPath/bobo/AddBoboPlanForm" novalidate="novalidate">
                <input type="hidden" name="planId" id="planId" value="0">
                <input type="hidden" name="userId" id="userId" value="$session.getAttribute('session.uid')">
                <div class="modal-body no-padding">
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 直播平台 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <select name="platformId" class="form-control" id="platformId">
                                <option value="">选择平台</option>
                                #foreach ($item in ${platforms})
                                    <option value="$item.platformId">$item.platformName</option>
                                #end
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 房间号 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text"  id="roomId" name="roomId" placeholder="直播房间" class="col-xs-10">
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 开始时间 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <span class="input-icon">
                                <input type="text" readonly id="beginTime" name="beginTime" placeholder="开始时间" class="col-xs-12">
                                <i class="ace-icon fa fa-clock-o green"></i>
                                </span>
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 结束时间 </label>
                        <div class="col-sm-9  col-xs-12">
                            <span class="input-icon">
                                <input type="text" readonly id="endTime" name="endTime" placeholder="结束时间" class="col-xs-12">
                                <i class="ace-icon fa fa-clock-o green"></i>
                                </span>
                        </div>
                    </div>
                    <div class="space-4"></div>
                </div>
                <div class="modal-footer no-margin-top text-right">
                    <button class="btn btn-sm btn-success " type="submit">
                        <i class="ace-icon fa fa-check"></i>
                        提交
                    </button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
#parse("include/libs.html")
<input style="display:none;" name="file" id="albums" type="file" placeholder=""/>
<script type="text/javascript" src="$request.contextPath/res/dic/region.min.js"></script>
<script type="text/javascript" src="$request.contextPath/res/dic/regionHelper.js"></script>
<script type="text/javascript" src="$request.contextPath/res/plugins/jquery.ajaxfileupload.js"></script>
<script src="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.js"></script>
<script type="text/javascript">
    var submitLock = false;
    var validator;
    var uploadtype;
    //    var productId = '$productId';

    var options = {
        beforeSerialize:function() {
        },
        beforeSubmit: function () {
            if (submitLock) {
                return false;
            }
            info('正在保存，请稍等...');
            submitLock = true;
            return true;
        },
        success: function (data) {
            submitLock = false;
            if (data.resultCode == 0) {
                succ('操作成功');
                $('#modal-category').modal('toggle');
                delay(function () {
                    window.location.reload(true);
                }, 1000);
            } else {
                error(data.resultMsg);
            }
        },
        error: function (data) {
            submitLock = false;
            error('系统繁忙，请稍候重试');
        },
        dataType: 'json',
        type: 'POST',
        timeout: 50000
    };
    $(function () {
        RegionHelper.InitHometomeArea($profile.hometownId);
        RegionHelper.checkDone = function (provinceId , cityId , regionId) {
            saveProfile("hometownId", regionId);
        }
        $(".personal-info-edit input[type='text']").each(function(){
            $(this).change(simpleChange);
        });

        $(".personal-info-edit input[name='gender']").each(function(){
            $(this).click(simpleChange);
        });
        $("#constellation").change(simpleChange);
        $("#gender").change(simpleChange);

        $("#uploadBtn").show().click(function(){
            uploadtype = "album";
            $('#albums').trigger('click');
        });
        $("#addPlanBtn").click(function(){
            $('#submitForm').clearForm();
            validator.resetForm();
            $('#modal-category').modal('toggle');
        });

        $("#user_album").addClass("self-photo");

        getAlbumData(1);

        validator = $("#submitForm").validate({
            errorElement: "em",
            errorPlacement: function (error, element) {
                element.after(error);
            },
            rules: {
                "platformId": {
                    required: true
                },
                "beginTime": {
                    required: true
                },
                "endTime": {
                    required: true
                }
            },
            messages: {
                "platformId": {
                    required: '请选择直播平台'
                },
                "bannerLoc": {
                    required: '请设置开始时间'
                },
                "bannerTarget": {
                    required: '请设置结束时间'
                }
            },
            submitHandler: function (form) {
                if (submitLock) {
                    return;
                }
                $(form).ajaxSubmit(options);
            }
        });

        jQuery('#beginTime').datetimepicker({
            lang: 'ch',
            format: 'Y-m-d H:i:00',
            step: 1
        });
        jQuery('#endTime').datetimepicker({
            lang: 'ch',
            format: 'Y-m-d H:i:00',
            step: 1
        });
    });

    function uploadHead() {
        uploadtype = "head";
        $('#albums').trigger('click');
    }

    function simpleChange() {
        if($(this).attr("name") == 'bwn') {
            var r =/[0-9]+(.[0-9]+)?-[0-9]+(.[0-9]+)?-[0-9]+(.[0-9]+)?/;
            var res = r.exec($(this).val())
            if (res == null || res[0] != $(this).val()) {
                layer.msg("请按照xx-xx-xx的格式输入",{icon:5});
                return;
            }
        } else if($(this).attr("name") == 'height' || $(this).attr("name") == 'weight') {
            var r =/[0-9]+(.[0-9]+)?/;
            var res = r.exec($(this).val())
            if (res == null || res[0] != $(this).val()) {
                layer.msg("请输入有效数字",{icon:5});
                return;
            }
        }
        saveProfile($(this).attr("name"), $(this).val());
        if($(this).attr("name") == 'nickname') {
            $("#nick").html($(this).val());
        }
    }
    var loadingIndex;
    $('input[type="file"]').ajaxfileupload({
        action: basePath+'/common/upload?thumbnail=1',
        valid_extensions : ['jpeg','jpg','png','gif','JPEG','JPG','PNG','GIF'],
        params: {
            file: 'file'
        },
        onComplete: function(response) {
            layer.close(loadingIndex);
            layer.msg("上传成功");
            if (uploadtype == "head") {
                saveProfile('avatar', response.url);
                layer.close(loadingIndex);
                $("#headPreview").attr('src', response.url);
                $("#headEdit").attr('src', response.url);
             } else {
                saveAlubm(response);
                getAlbumData(1);
            }
        },
        onStart: function() {
            console.log("开始上传...");
            loadingIndex = layer.load(1);
            if ($(this)[0].files[0].size > 5*1024*1024) {
                layer.msg("文件大小不能超过5M",{icon:5});
                return false;
            }
        },
        onCancel: function() {
            console.log('no file selected');
        }
    });

    function saveAlubm(albumObj) {
        if(!albumObj.albumId) {
            albumObj.albumId = 0;
        }
        $.ajax({
            type: "POST",
            url: basePath+'/index/album',
            data: albumObj,
            success: function (data) {
            },
            dataType: 'JSON'
        });
    }

    function delAlubm(albumId) {
        $.ajax({
            type: "POST",
            url: basePath+'/index/album',
            data: {albumId:albumId},
            success: function (data) {
                console.log(data);
                getAlbumData(1);
            },
            dataType: 'JSON'
        });
    }

    function deletePlan(Id) {
        $.ajax({
            type: "GET",
            url: basePath + '/bobo/DelBoboPlan',
            data: {planId:Id},
            success: function (data) {
                layer.msg("删除成功");
                window.location.reload(true);
            },
            dataType: 'JSON'
        });
    }

    function getAlbumData(curr){
        var brands;
        console.log("GetAlbumData"+curr);
        $.ajax({
            url: basePath+"/index/getUserAlbum",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 9,
                "uid":$profile.uid,
            },

            success: function (data) {
                brands = data["list"];
                //调用分页
                laypage({
                    cont: 'album_pager',
                    pages: data['pages'],
                    curr: curr, //当前页
                    skin: '#ffab33',
                    prev: '上一页', //若不显示，设置false即可
                    next: '下一页', //若不显示，设置false即可
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getAlbumData(obj.curr);
                        }
                    }
                })
                var str = "";
                userAlbumes = new Array();
                for(var i in brands){
                    var kys = brands[i];
                    str += "<li><img onclick=\"viewBigImg("+i+")\" src='"+kys['url']+"'>" +
                            "<span><img onclick=\"delAlubm('"+kys['albumId']+"')\" src=\""+basePath+"/res/images/delete.png\"></sp</li>";
                    userAlbumes.push({
                        alt:"相册图片",
                        pid:kys['albumId'],
                        src:kys['url'],
                        thumb:kys['thumbnailUrl']
                    })
                }
                $("#user_album").html(str);

            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function saveProfile(key, value) {
        if(!key || !value) return;
        $.ajax({
            type: "POST",
            url: basePath+'/index/saveProfile',
            data: {
                field:key,
                val:value,
            },
            success: function (data) {
                if (data.resultCode == 0) {

                } else {
                    layer.msg('保存资料失败！', {icon: 5});
                }
            },
            error:function(data) {
                layer.msg('系统异常请稍后重试！', {icon: 5});
            },
            dataType: 'JSON'
        });
    }

</script>
</body>
</html>